<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本用法</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        // 在jquery中,所有方法的调用者必须是一个jquery对象
        // DOM对象无法调用jquery方法,jquery对象也无法调用DOM方法
        // window.onload = function(){
        //     document.getElementById("btn").onclick = function(){
        //         console.log("这是一个动态绑定事件")
        //     }
        // }
        // 在jquery中,也封装了对应的页面加载事件ready
        // document --> 文档,是一个DOM对象
        // DOM对象 --> jquery对象:$(DOM对象)
        // $(document).ready(function(){
        //     // $(选择器):根据指定选择器查找元素,返回jquery对象
        //     $("#btn").click(function(){
        //         console.log("这是通过jquery函数绑定的事件")
        //     })
        //     // $("#btn").on("click",function(){
        //     //     console.log("这是通过jquery函数绑定的事件")
        //     // })
        // });
        // 在jquery中,一般使用动态绑定的方式绑定事件,因此基本上都需要加载页面
        // 简化版
        // $(document).ready(fn) --> $(fn)
        $(function(){
            $("#btn").click(function(){
                console.log("这是简化版通过jquery函数绑定的事件")
            })
        })
    </script>
</head>
<body>
<button id="btn">测试</button>
</body>
</html>